@import '/src/styles/common.less';

.inline-form {
  :global {
    .common-ant-form-item();
  }
}

.contrast-time {
  :global {
    .ant-checkbox-wrapper {
      line-height: 34px;
    }
  }
}
.contrast-time-hide {
  display: none;
}
.title {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 0px;
  font-size: 14.5px;
  margin-right: 18px;
  margin-left: 20px;
}

.chart-dimension-tips {
  font-size: 12px;
  color: #999999;
  line-height: 30px;
  margin-bottom: 0;
  margin-right: 10px;
}

:global {
  .ant-table-summary {
    display: table-header-group;
    & tr {
      td {
        background: #fafafa;
      }
    }
 }
}

.medium-data-overview {
  position: relative;
  :global {
    .ant-pro-card-body {
      padding: 21px 0px !important;
      .ant-pagination {
        margin-right: 20px;
      }
    }

    .ant-tabs {
      .ant-tabs-extra-content p {
        text-align: left;
      }
      .ant-tabs-extra-content {
        margin-top: 2px;
      }
      .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
        display: none;
      }
      .ant-tabs-tab + .ant-tabs-tab {
        margin: 0px 10px;
      }
      .ant-tabs-nav-list .ant-tabs-tab-btn .anticon {
        width: 18px;
        height: 18px;
        vertical-align: text-bottom;
        svg {
          width: 100%;
          height: 100%;
        }
      }

      .ant-tabs-nav-list .ant-tabs-tab-btn .anticon:hover {
        color: #2364FB;
      }

      .ant-tabs-nav-wrap {
        flex: none;
      }
    }

    .ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav {
      margin: 0 0 12px 0;
    }

    .ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before {
      border-bottom-color: transparent;
    }
  }

  .report-chart-filter,
  .report-chart-dimension {
    padding: 0px 24px 0px 20px;
    :global {
      .ant-form .ant-form-item {
        margin-bottom: 20px;
      }
      .ant-form {
        .anticon {
          // display: none;
        }
      }
    }
  }

  .common-style {
    :global {
      .ant-form {
        .common-ant-form-item();
      }
    }
  }

  .report-chart-dimension {
    display: flex;
    float: right;
    :global {
      .ant-form-item {
        margin-right: 10px;
      }
      
        button.ant-btn {
          height: 30px;
          margin-top: 1px;
        }
    }
  }
}

.report-header {
  margin-top: -50px;
  margin-bottom: -25px;
  overflow: auto;
  width: calc(100% - 400px);
  float: right;
  position: relative;
}

.resport-download-container {
  display: flex;
  position: absolute;
  right: 0;
  top: -6px;
  a {
    height: 32px;
    font-size: 13px;
    line-height: 30px;
  }

  :global {
    .data-target-container {
      margin-right: 4px;
      button.ant-btn {
        height: 31px;
        font-size: 13px;
        .anticon {
          margin-top: 1px;
        }
      }
    }
  }
}

.report-chart-container {
  clear: both;
  // min-height: calc(100vh - 353px);
  
  position: relative;
}
.report-chart-wrap {
  height: 100%;

  :global {
    .ant-spin-nested-loading {
      height: 100%;

      .ant-spin-container {
        height: 100%;
        position: relative;
      }
    }
  }
}
.data-chart {
  margin-top: 20px;
  height: 100%;
  min-height: calc(100vh - 353px);
  // overflow-y: scroll;
  .data-chart-item {
    position: relative;
    canvas {
      border-bottom: 1px solid #ccc !important;
    }

    .left-dimension-line,
    .right-dimension-line,
    .left-time-line,
    .right-time-line,
    .left-poly-line,
    .right-poly-line {
      position: absolute;
      width: 1px;
      top: 0;
      background-color: #ccc;
    }

    .left-dimension-line {
      left: 100px;
      height: 80px;
    }
    .right-dimension-line {
      right: 100px;
      height: 80px;
    }

    .left-time-line {
      left: 100px;
      height: 80px;
    }
    .right-time-line {
      right: 100px;
      height: 80px;
    }
    .left-poly-line {
      left: 100px;
      height: 80px;
    }
    .right-poly-line {
      right: 100px;
      height: 80px;
    }
  }
  .data-chart-item:first-child {
    canvas:first-child {
      border-top: 1px solid #ccc !important;
    }
  }
}

.custome-line-chart-x, 
.time-compare-container,
.poly-compare-container {
  width: calc(100% - 18px);
  position: fixed;
  background-color: #fff;
  z-index: 999;
}

.custome-line-chart-x {
  // bottom: -50px;
  bottom: 0;
  height: 40px;
}

.time-compare-container {
  // bottom: -70px;
  bottom: 0;
  height: 70px;
}

.poly-compare-container {
  height: 80px;
  // bottom: -70px;
  bottom: 0;
}

